<template>
	<div class="yellow">
		<div class="head flex a-center jlr">
			<div class="back" @click="back"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>注册</h2>
			<div class="back">&nbsp;</div>
		</div>

		<div class="abox">
			<div class="login">
				<div class="portrait"></div>
				<div class="loginbox">
					<div class="loginItem flex a-center">
						<input type="tel" placeholder="请输入手机号" maxlength="11" v-model="obj.phone" @input="cinput">
						<div class="icon-close" @click="openclose" v-if="obj.phone"></div>
					</div>

					<div class="logingroup flex a-center jlr">
						<div class="loginItem flex a-center" style="width: 60%; margin-top: 0;">
							<input type="tel" placeholder="请输入验证码" maxlength="6" v-model="obj.smsCode">
						</div>
						<button :disabled="isdisabled" @click="sendSmsCode">{{verifyname}}</button>
					</div>

					<div class="loginItem flex a-center">
						<input :type="type?'password':'text'" placeholder="请输入密码" v-model="obj.passwd">
						<i class="iconfont" :class="type?'icon-yanjing':'icon-yanjing1'" @click="openpwd"></i>
					</div>

					<div class="checkbox">
            <van-checkbox checked-color="#fe7537" v-model="checked">
              <span @click="agreement">注册即代表同意<span style="color: red;">《用户协议》</span></span>
            </van-checkbox>
					</div>

					<div v-if="checked" class="blockbtn" @click="login" style="margin-top: 0.4rem;">确认</div>

				</div>
			</div>

		</div>

	</div>

</template>
<script>
export default {
	data(){
		return {
			checked:true,
			type:true,
			isdisabled:true,
			verifyname:'获取验证码',
			obj:{
				smsCode:'',
				phone:'',
				passwd:''
			}
		}
	},
	methods:{
		enter(v){
			this.$router.push(v)
		},
		back(){
			this.$router.go(-1)
		},
		cinput(){
			var that = this
			var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
			if(myreg.test(that.obj.phone)){
				that.isdisabled = false
			}else{
				that.isdisabled = true
			}
		},
		sendSmsCode(){
			let num = 60
			var timer = null
			var that = this
			if(!that.isdisabled){
				that.isdisabled = true
				that.$ajax.sendSmsCode({phone:that.obj.phone}).then(res=>{
					--num
					that.verifyname = num+'s'
					timer = setInterval(()=>{
						--num
						that.verifyname = num+'s'
						if(num<=0){
							clearInterval(timer)
							that.isdisabled = false
							that.verifyname = '获取验证码'
						}
					},1000)
				})
			}
		},
		openclose(){
			this.obj.phone = ''
		},
		openpwd(){
			this.type = !this.type
		},
		login(){
			var that = this
			var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
			if(!myreg.test(that.obj.phone)){
				that.$toast.fail('手机号格式不正确')
			}else if(!that.obj.smsCode){
				that.$toast.fail('请输入验证码')
			}else if(!that.obj.passwd){
				that.$toast.fail('请输入密码')
			}else{
				that.$ajax.reg({...that.obj}).then(res=>{
					if(res.code==0){
						localStorage.setItem('token',res.data.token)
						this.$router.push('/')
					}
				})
			}

		},
    agreement(){
		  const url = 'https://m.hdsgou.com/agreement.html';
      try {
        let w = plus.webview.create(url, '', {
          'titleNView': {
            'backgroundColor': '#FFFFFF',
            'titleText': '',
            'titleColor': '#CCCCCC',
            autoBackButton: true,
            buttons: null
          },
          'backButtonAutoControl': 'close'
        });
        plus.webview.show(w);

      } catch (e) {
        window.location.href = url
      }
    }
	}
}
</script>
